<template>
	<div class="gridList">
		<div class="item" v-for="(item, index) in list" :key="index" @click="handleView(item)">
			<div class="image">
				<div class="vip" v-if="item.is_vip=='1'">
					<image class="img" src="/static/img/vip01.svg" mode="widthFix"></image>
				</div>
				<div class="count-text">
					<div class="count">{{item.score}}</div>
					<div class="text" v-if="item.teli !='يوق'">{{item.teli}}</div>
				</div>
				<div class="qisim" v-if="item.qisim>='2'">
					<div class="white">{{item.qisim}}</div>
					<div class="white margin-lr-xs">/</div>
					<div class="yellow tip">
						<div>قىسىم</div>
						<div>-{{item.qisim_count}}</div>
					</div>
				</div>

				<image class="img" :src="item.image" mode="aspectFill"></image>
			</div>
			<div class="text">
				<div class="name">{{item.title}}</div>
				<div class="desc" v-if="isShowDesc">
					كۆرۈلىشى : {{item.view}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getRoute
	} from '@/scripts/compatible/pageOptions.js'
	export default {
		props: {
			list: {
				type: Array,
				require: true,
			},
			isShowDesc: {
				type: Boolean,
				default: () => true,
			},
		},
		data() {
			return {

			}
		},
		methods: {
			handleView(item) {
				// console.log(item);
				const route = getRoute()
				const path = '/pages/view/index'
				if (path == route) {
					uni.redirectTo({
						url: `${path}?id=${item.id}`
					})
				} else {
					uni.navigateTo({
						url: `${path}?id=${item.id}`
					})
				}
			},

		},
	}
</script>

<style lang="scss" scoped>
	.gridList {
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-evenly;
		flex-direction: row-reverse;

		.item {
			width: calc((100% - 40px) / 3);
			margin: 15px 10px 0 0;

			&:nth-of-type(-n + 3) {
				margin-top: 0;
			}

			.image {
				height: 152px;
				position: relative;
				overflow: hidden;
				border-radius: 8px;

				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.vip {
				width: 30px;
				position: absolute;
				left: 5px;
				top: -5px;
				z-index: 1;

				.img {
					display: block;
					width: 100%;
				}
			}

			.count-text {
				height: 20px;
				border-radius: 10px;
				overflow: hidden;
				display: flex;
				align-items: center;
				width: max-content;
				position: absolute;
				top: 5px;
				right: 5px;
				z-index: 1;

				.count {
					background-color: #333333;
					color: #fff;
					width: max-content;
					padding: 0 6px;
					font-size: 12px;
				}

				.text {
					color: #fff;
					background-color: #0081ff;
					width: max-content;
					padding: 0 6px;
					font-size: 12px;
				}
			}

			.qisim {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row-reverse;
				z-index: 1;
				background-image: linear-gradient(transparent, rgba(0, 0, 0, .6));

				.tip {
					display: flex;
				}

				.white {
					color: #fff;
				}

				.yellow {
					color: #fbbd08;
				}

				.margin-lr-xs {
					margin: 0 4px;
				}
			}

			.text {
				font-size: 12px;
				white-space: nowrap;
				text-align: center;
				transform: scaleX(.8);
				overflow: hidden;

				.name {
					color: #000;
				}

				.desc {
					display: flex;
					flex-direction: row-reverse;
					justify-content: center;
					color: #999;

					.center {
						margin: 0 2px;
					}
				}
			}
		}
	}
</style>